<template>
	<view class="myInfo_main">
		<!-- banner和头像等 -->
		<view class="myInfo_banner">
			<view class="myInfo_edit" @click="editInfo">编辑资料</view>
			<image class="myInfo_image" :src="userData.avatarUrl"></image>
			<view class="myInfo_name">{{userData.nickName}}</view>
		</view>

		<!-- 菜单 -->
		<view class="myInfo_menu">
			<Menu v-for="item,index in menuList" :menuItem="item" v-block class="myInfo_menu_item" @click="clickItem(item)" >
			</Menu>
		</view>

		<view class="myInfo_menu_list">
			<view class="myInfo_menu_list_item" v-for="item in list" @click="clickMenu(item)">
				<text>{{item}}</text>
				<image src="../../static/barIcon/right.png" mode="" class="myInfo_menu_list_item_icon"></image>
			</view>
		</view>

	</view>
</template>

<script>
	import Menu from "@/components/Menus.vue"
	export default {
		comments: {
			Menu
		},
		data() {
			return {
				name: "拉布拉多肉",
				menuList: [{
						iconUrl: "../static/menusIcon/myInfo_1.png",
						title: "我的测评"
					},
					{
						iconUrl: "../static/menusIcon/myInfo_2.png",
						title: "我的经验"
					},
					{
						iconUrl: "../static/menusIcon/myInfo_3.png",
						title: "我的消息"
					},
					{
						iconUrl: "../static/menusIcon/myInfo_4.png",
						title: "我的收藏"
					},
				],
				list: ["优惠券", "订单记录", "关于我们"],
				userData: {}
			}
		},
		methods: {
			clickMenu: function(item) {
				let url = ""
				switch (item) {
					case "优惠券":
						url = "../Coupons/Coupons";
						break;
					case "订单记录":
						url = "../OrderList/OrderList";
						break;
					case "关于我们":
						url = "../About/About";
						break;
					default:
						break;
				}
				uni.navigateTo({
					url,
					fail: (err) => {
						console.log(err, "跳转失败")
					}
				})
			},
			editInfo: function() {
				uni.navigateTo({
					url: "../EditInfo/EditInfo",
					fail: (err) => {
						console.log(err, "跳转失败")
					}
				})
			},
			clickItem: function(item) {
				let url = ""
				switch (item.title) {
					case "我的测评":
						url = "../Review/Review";
						break;
					case "我的经验":
						url = "../Experience/Experience";
						break;
					case "我的消息":
						url = "../Message/Message";
						break;
					case "我的收藏":
						url = "../Collection/Collection";
						break;
					default:
						break;
				}
				uni.navigateTo({
					url,
					fail: (err) => {
						console.log(err, "跳转失败")
					}
				})
			}
		},
		mounted() {
		},
		onShow() {
			const userId = uni.getStorageSync('userInfo').id
			this.$api.myinfo({userId: userId}).then(
				(infoRes) => {
					if (infoRes?.code === '200') {
						this.userData = infoRes?.data
						uni.setStorageSync("userData", infoRes?.data)
					}
				}
			)
		}
	}
</script>

<style>
	.myInfo_main {
		width: 100%;
		position: relative;
	}

	.myInfo_banner {
		position: relative;
		width: 100%;
		height: 380rpx;
		background-image: url("../../static/infoback.png");
		border-bottom-right-radius: 50% 50rpx;
		border-bottom-left-radius: 50% 50rpx;
	}

	.myInfo_edit {
		position: absolute;
		top: 30rpx;
		right: 15rpx;
		background-color: rgba(253, 250, 255, 0.3);
		color: #FFFFFF;
		font-size: 10px;
		padding: 10rpx;
		border: 2rpx solid #c6c4c8;
		border-radius: 12px 12px;
	}

	.myInfo_image {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 80rpx;
		width: 120rpx;
		height: 120rpx;
		z-index: 100;
		border-radius: 50% 50%;
		background-color: #FFFFFF;
	}

	.myInfo_name {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 220rpx;
		font-size: 18px;
		font-weight: 600;
		color: #FFFFFF;
		z-index: 100;
	}

	.myInfo_menu {
		position: absolute;
		width: 90%;
		height: 160rpx;
		top: 290rpx;
		left: 50%;
		transform: translateX(-50%);
		background-color: #FFFFFF;
		z-index: 100;
		border-radius: 12rpx 12rpx;
		box-shadow: 3rpx 3rpx 10rpx 5px rgba(0, 0, 0, .1);

		display: grid;
		grid-template-columns: repeat(4, 25%);
		grid-row-gap: 10rpx;
		grid-column-gap: 10rpx;
		padding: 20rpx;
	}

	.myInfo_menu_item {
		width: 150rpx;
	}

	.myInfo_menu_list {
		box-sizing: border-box;
		width: 100%;
		position: absolute;
		top: 550rpx;
		padding: 0 50rpx;
	}

	.myInfo_menu_list_item {
		height: 100rpx;
		line-height: 100rpx;
		display: flex;
		justify-content: space-between;
		position: relative;
	}

	.myInfo_menu_list_item_icon {
		height: 30rpx;
		width: 20rpx;
		position: absolute;
		display: table-cell;
		right: 0rpx;
		top: 50%;
		transform: translateY(-50%);
	}
</style>
